<template>
  <div>
     <div class="config">
        <div class="back" onclick="window.history.go(-1)"><img src="../assets/images/back.png" alt=""></div>
        <p>代理加盟明细</p>
    </div>
     <div class="box" v-show="!show">
        <div class="row" v-for="item in data">
                <img src="../assets/images/dailixiangmu.png" alt="" class="img">
                <p class="title">{{item.name}}</p>
                <div class="conleft">
                     <p>授权号:{{item.uid}}</p>
                     <p>状态:{{item.status}}</p>
                </div>  
                  <div class="conright">
                     <p>代理级别: {{item.level}}</p>
                     <p>加入时间: {{item.create_time}}</p>
                </div>                                           
        </div>            
           
     </div>

    <div class="con" v-show="show">
        <div class="bg1"></div>
        <div class="bg2">
                <div class="check">
                <img src="../assets/images/zhaobudao.png" alt="">
                <p>您没有正在分享的链接</p>
                <p>代理链接或者分享都已经过期</p>
                </div>
        

        </div>  
    </div>



  </div>
</template>

<script>
export default {
    name: "agentDetail",
    
    data() {
        return {
            data: {},
            show:false
       
        };
    },
    methods: {},
    beforeCreate() {
        document.getElementsByTagName("body")[0].style.background = "#fff";
    },
    mounted() {
        var qs=require("qs");
        
        this.axios({
            method: "post",
            url: `${this.siteUrl}/getInvitation`,
            data:  qs.stringify({           
                    uid: localStorage.getItem("uid")
                })
        })
            .then(response => {
            
                if ((response.data.result == 200)) {
                    this.data = response.data.data;
                    for (var i in this.data) {
                        if (this.data[i].status == 0) {
                            this.data[i].status= "正常";
                        }
                        if (this.data[i].status == 1) {
                            this.data[i].status= "审核失败";
                        }
                        if (this.data[i].status == 2) {
                            this.data[i].status= "审核中";
                        }
                        if(this.data[i].level==1){
                            this.data[i].level= "联合创始人";
                        }
                        if(this.data[i].level==2){
                            this.data[i].level= "执行董事";
                        }
                        if(this.data[i].level==3){
                            this.data[i].level= "合伙人";
                        }
                        if(this.data[i].level==4){
                            this.data[i].level= "钻石代理";
                        }
                    }

                        for (var j in this.data){
                            this.data[j].create_time=new Date(this.data[j].create_time).toLocaleDateString()
                        }
                   
                    if (this.data.length == 0) {
                        this.show=true;
                         document.getElementsByTagName("body")[0].style.background = "#5aa0c8";
                        
                    }
                } else {
                    alert("请求失败");
                }
            })
            .catch(function(error) {
                console.log(error);
            });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.row {
    height: 100px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    margin: 8px;
    border-radius: 3px;
}

.row .img {
    position: absolute;
    width: 22px;
    top: 13px;
    left: 8px;
}

.row .title {
    position: absolute;
    left: 40px;
    top: 15px;
    font-size: 14px;
}
.row .conleft {
    position: absolute;
    top: 40px;
    font-size: 12px;
    line-height: 22px;
    color: #666;
    left: 40px;
}
.row .conright {
    position: absolute;
    top: 40px;
    font-size: 12px;
    line-height: 22px;
    color: #666;
    right: 10px;
    text-align: right;
}

/* 没有数据显示 */
.con {
    width: 100vw;
    height: 92vh; 
    position: absolute;
    bottom: 0px;
    margin-top: 50px;
}

.con .bg1 {
    width: 90%;
    height: 65vh;
    background: #dae7ef;
    left: 5%;
    border-radius: 5px;
    position: absolute;
    top: 10%;
}
.con .bg2 {
    width: 86%;
    height: 67vh;
    background: #fff;
    left: 7%;
    border-radius: 5px;
    position: absolute;
    top: 9%;
}

.con .check{  
    margin-top: 20vh;    
    text-align: center;
}
.con .check img{
    width: 80px;
}
.con .check p{
    margin-top: 10px;
    color:#5aa0c8 ;
}
</style>
